/* miniprogram.wxss */
.TabBar {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  // 这个样式在其他页面也会生效，orz
  .tab {
    position: relative;
    display: flex;
    width:100vw;
    height:120rpx;
    z-index: 100;
    justify-content: space-between;
    .tab-group {
      width:40vw;
      // background-color:oldlace;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .btn {
      position: absolute;
      left:0;
      right:0;
      margin:0 auto;
      bottom:48rpx;
      width:136rpx;
      height:136rpx;
      padding:0;
      border-radius: 50%;
      box-shadow: 0 0 12rpx 2rpx #FFCF56;
  
      display: flex;
      justify-content: center;
      align-items:center;
    }  
    .add-icon {
      height:56rpx;
      width:56rpx;
      background-repeat: no-repeat;
      // 第一个值指定图片的宽度，第二个是高度
      background-size: cover;
    }
  }
  
  .danger-zone {
    position: relative;
    width:100vw;
    background-color:#fff;
    // 水平居中
    display: flex;
    justify-content: center;
  }
  
  .bg {  
    position: absolute;
    top:0;
    transform: translateY(calc(-100% + 15rpx));
    width:788rpx;
    height:154rpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("");
  }
  
  .icon {
    position: relative;
    height:50rpx;
    width:55rpx;
    background-repeat: no-repeat;
    // 第一个值指定图片的宽度，第二个是高度
    background-size: auto 50rpx;
    &:active{
      background-color:ivory;
    }

    .hasMsg {
      width: 20rpx;
      height: 20rpx;
      position:absolute;
      right:0;
      top:0;
      transform: translate(50%, -50%);
      background-color: #ff971e;
      border-radius: 50%;
    }
  }
}


// -------------------------
.temp {
  .active {
    position: relative;
    color:#f3ae00;
    &::after {
      content:'';
      position: absolute;
      bottom:-10rpx;
      left:0;
      width:100%;
      height:5rpx;
      background-color: #f3ae00;
      border-radius: 10rpx;
    }
  }
}

.hide {
  display: none;
}